<template>
  <div>
    <v-chart :force-fit="false" :height="height" :data="data" :scale="scale" :padding="padding">
      <v-tooltip />
      <v-legend
        position="top"
      />
      <v-axis
        dataKey="医疗服务机构"
        :title="lTitle"
      />
      <v-axis
        :title="rTitle"
      />
      <v-bar position="time*医疗服务机构" color="#3182bd" :on-click="dump" />
      <v-smooth-line position="time*temperature" color="city" :size="gemoSize" />
      <v-point shape="circle" position="time*temperature" color="city" :size="gemoSize" />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require('@antv/data-set')
const sourceData = [
  { time: '10:10', call: 4, '医疗服务机构': 2, '门诊数量': 2, '住院数量': 5 },
  { time: '10:15', call: 2, '医疗服务机构': 6, '门诊数量': 3, '住院数量': 4 },
  { time: '10:20', call: 13, '医疗服务机构': 2, '门诊数量': 5, '住院数量': 5 },
  { time: '10:25', call: 9, '医疗服务机构': 9, '门诊数量': 1, '住院数量': 3 },
  { time: '10:30', call: 5, '医疗服务机构': 2, '门诊数量': 3, '住院数量': 8 },
  { time: '10:35', call: 8, '医疗服务机构': 2, '门诊数量': 1, '住院数量': 2 },
  { time: '10:40', call: 13, '医疗服务机构': 1, '门诊数量': 2, '住院数量': 5 }
]
const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'fold',
  fields: ['门诊数量', '住院数量'],
  key: 'city',
  value: 'temperature'
})
const data = dv.rows

const scale = [{
  dataKey: 'call',
  min: 0
}, {
  dataKey: '门诊',
  min: 0
}, {
  dataKey: '医疗服务机构',
  min: 0
}]

export default {
  data() {
    return {
      lTitle: { text: '单位/条', position: 'end', offset: 49, autoRotate: false },
      rTitle: { text: '单位/家', position: 'end', offset: 49, autoRotate: false },
      data,
      scale,
      padding: [30, 60, 20, 100],
      height: 241,
      axisLabel: {
        textStyle: {
          fill: '#fdae6b'
        }
      },
      axisGrid: null,
      gemoSize: 3,
      legendCustom: true,
      legendAllowAllCanceled: true
      // legendItems: [
      //   { value: '医疗服务机构', marker: { symbol: 'square', fill: '#3182bd', radius: 5 }},
      //   { value: 'temperature', marker: { symbol: 'hyphen', stroke: '#fdae6b', radius: 5, lineWidth: 3 }}
      // ],
      // legendOnClick: (ev, chart) => {
      //   const item = ev.item
      //   const value = item.value
      //   const checked = ev.checked
      //   const geoms = chart.getAllGeoms()
      //   for (let i = 0; i < geoms.length; i++) {
      //     const geom = geoms[i]
      //     if (geom.getYScale().field === value) {
      //       if (checked) {
      //         geom.show()
      //       } else {
      //         geom.hide()
      //       }
      //     }
      //   }
      // }
    }
  },
  methods: {
    dump: function() {
      alert(333)
    }
  }
}
</script>
